import React, { forwardRef, useEffect, useState } from "react";
import { Modal, Form, Input, Spin, message, Space, Button, Checkbox, Divider, InputNumber } from '@bytedance/mona-ui';
import { useAppSelector, useAppDispatch } from "~store"
import { setUserInfoData, buySmsNums, queryPayOrder } from "@Api/webServerApi"
import { getDlyUserInfoAction } from "~store/controller/autoCounps"

function SmsOptions(props, ref) {
    const { visible, onCancel, onOk } = props;
    const dlyUserInfo: any = useAppSelector(state => state.autoCounps.dlyUserInfo)
    const [spinlodins, setSpinlodins] = useState(false)
    const [smsVisible, setSmsVisible] = useState(false)
    const [smsOptions, setSmsOptions] = useState<any>({
        phone: '',
        login: false,
        success: false,
        fail: false
    })
    const sensnmse = [{
        num: 100,
        name: '100条',
        price: '10',
        select: true,
        sendNum: 0,
        tips: '可用于通知创建任务'
    }, {
        num: 1000,
        name: '1000条',
        price: '100',
        select: false,
        sendNum: 0,
        tips: '可用于通知创建任务'
    }, {
        num: 5000,
        name: '5000条',
        price: '500',
        select: false,
        sendNum: 0,
        tips: '可用于通知创建任务'
    }]
    const [senderSms, setSenderSms] = useState<any>(sensnmse)
    const [buyNum, setBuyNum] = useState(1)
    const [buysmslodin, setBuysmslodin] = useState(false)

    useEffect(() => {
        if (dlyUserInfo) {
            setSmsOptions({
                phone: dlyUserInfo.usePhone || dlyUserInfo.phone,
                login: dlyUserInfo.login,
                success: dlyUserInfo.success,
                fail: dlyUserInfo.fail
            })
        }
    }, [dlyUserInfo])
    const dispatch = useAppDispatch()
    return <>

        <Modal
            size="small"
            title="短信通知配置"
            visible={visible}
            onCancel={() => {
                onCancel()
            }}
            onOk={() => {
                console.log('smsOptions', smsOptions)
                setSpinlodins(true)
                setUserInfoData(smsOptions).then(res => {
                    console.log('设置结果', res)
                    setSpinlodins(false)
                    message.success('设置成功')
                    onOk()
                })
            }}
            width={630}
        >
            <Spin spinning={spinlodins}>

                <Space direction="vertical" style={{
                    width: '100%'
                }}>
                    <Space >
                        <span>账户信息：{dlyUserInfo?.phone}</span>
                        <span>短信余额：{dlyUserInfo?.smsNum}</span>
                        <Button type="primary" size="mini" onClick={() => {
                            setSmsVisible(true)
                        }}>充值短信</Button>
                    </Space>
                    <Divider style={{
                        margin: '1px 0 5px 0'
                    }} />
                    <Space direction="vertical">
                        <Space>
                            <span>接收手机号: </span>
                            <Input size="small" value={smsOptions.phone} onChange={(e) => {
                                setSmsOptions({
                                    ...smsOptions,
                                    phone: e.target.value
                                })
                            }} placeholder="请输入手机号" />
                        </Space>
                        <Checkbox checked={smsOptions.login} onChange={(e) => {
                            setSmsOptions({
                                ...smsOptions,
                                login: e.target.checked
                            })
                        }}>登录失效时</Checkbox>
                        <Checkbox
                            checked={smsOptions.success} onChange={(e) => {
                                setSmsOptions({
                                    ...smsOptions,
                                    success: e.target.checked
                                })
                            }}
                        >创建成功时</Checkbox>
                        <Checkbox
                            checked={smsOptions.fail} onChange={(e) => {
                                setSmsOptions({
                                    ...smsOptions,
                                    fail: e.target.checked
                                })
                            }}
                        >创建失败时</Checkbox>
                    </Space>
                </Space>
            </Spin>

        </Modal>
        <Modal
            title="短信充值"
            visible={smsVisible}
            footer={(<Space>
                <Button size="mini" type="primary" onClick={() => {
                    // console.log('senderSms', senderSms, buyNum)
                    const getFindUper = senderSms.find((res) => res.select)
                    const addcoter = {
                        ...getFindUper,
                        buyNum
                    }
                    console.log('addcoter', addcoter)
                    setBuysmslodin(true)
                    buySmsNums(addcoter).then((res) => {
                        console.log('res', res)
                        setBuysmslodin(false)
                        if (!res.code) {
                            // message.success('充值成功')
                            // setSmsVisible(false)
                            open(res.data)
                            setTimeout(() => {
                                Modal.confirm({
                                    title: '充值提示',
                                    content: '是否前往充值记录',
                                    okText: "我已充值",
                                    cancelText: "充值失败",
                                    onOk: () => {
                                        console.log('查询充值结果，刷新')
                                        queryPayOrder({ out_trade_no: res.out_trade_no }).then((resconter) => {
                                            console.log('res', resconter)
                                            if (resconter.status == '0') {
                                                message.warning('充值失败')
                                                return
                                            }
                                            if (resconter.status == '1') {
                                                message.success('充值成功')
                                                setSmsVisible(false)
                                                dispatch(getDlyUserInfoAction(''))
                                                return
                                            }
                                        })
                                    }
                                })
                            }, 1000)
                        }
                    })
                }}>确认充值</Button>
            </Space>)}
            onOk={() => { setSmsVisible(false) }}
            onCancel={() => { setSmsVisible(false) }}>
            <Spin spinning={buysmslodin}>

                <div className="cuterBsueh" style={{
                    marginBottom: '20px'
                }}>
                    <div className="tip">
                        套餐配额
                    </div>
                    <div className="guriner">
                        {senderSms.map((res, index) => {
                            return <div key={index} className={res.select ? 'gurinerItem gurinerItemActive' : 'gurinerItem'} onClick={() => {
                                senderSms.forEach((item, ite) => {
                                    item.select = false
                                })
                                res.select = true
                                setSenderSms([...senderSms])
                            }}>
                                <div>{res.num}条</div>
                                <div>¥{res.price}</div>
                                <div>{res.tips}</div>
                            </div>
                        })}
                    </div>

                </div>
                <div className="cuterBsueh">
                    <div className="tip">
                        购买数量
                    </div>
                    <div className="buyNums">
                        <InputNumber showCounter errorType='bubble' size="small" min={1} max={10000} value={buyNum} onChange={(e: any) => {
                            setBuyNum(e)
                        }} />
                    </div>
                </div>
            </Spin>

        </Modal>
    </>
}


export default forwardRef(SmsOptions);